<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type='hidden' name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script>
    window.addEventListener('load', async function () {
      axios.defaults.baseURL = 'http://ajax-api.itheima.net'
      const res = await axios({
        url: '/api/settings',
      })
      console.log(res);
      const {
        nickname,
        area,
        avatar,
        city,
        province
      } = res.data.data
      document.querySelector('[name=nickname]').value = nickname
      document.querySelector('.figure-img').src = avatar
      document.querySelector('[name=avatar').value = avatar

      //获取省的数据
      const prov_res = await axios({
        url: '/api/province',
      })
      console.log(prov_res);
      let proinput = document.querySelector('[name=province]')
      proinput.innerHTML = prov_res.data.data.map((item) => {
        return `<option value="${item}">${item}</option>`
      }).join('')
      proinput.value = province
      //获取城市的数据
      const city_res = await axios({
        url: '/api/city',
        params: {
          pname: province
        }
      })
      console.log(city_res);
      console.log(province);
      const cityinput = document.querySelector('[name=city]')
      cityinput.innerHTML = city_res.data.data.map((item) => {
        return ` <option value="${item}">${item}</option>`
      })
      cityinput.value = city
      //获取区的数据
      const area_res = await axios({
        url: '/api/area',
        params: {
          pname: province,
          cname: city
        }
      })
      console.log(area_res);
      console.log(area);
      const areainput = document.querySelector('[name=area]')
      areainput.innerHTML = area_res.data.data.map((item) => {
        return ` <option value="${item}">${item}</option>`
      })
      areainput.value = area
      //改变省 市和区联动改变
      proinput.addEventListener('change', async function () {
        const newpro_res = await axios({
          url: '/api/city',
          params: {
            pname: this.value
          }
        })
        cityinput.innerHTML = newpro_res.data.data.map((item) => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        //改变区
        const newarea_res = await axios({
          url: '/api/area',
          params: {
            pname: this.value,
            cname: cityinput.value
          }
        })
        areainput.innerHTML = newarea_res.data.data.map((item) => {
          return `<option value="${item}">${item}</option>`
        }).join('')
      })
      // 省市区联动 之 改变市
      cityinput.onchange = async function () {
        const newareaRes2 = await axios({
          url: '/api/area',
          params: {
            pname: proinput.value,
            cname: this.value,
          },
        })
        areainput.innerHTML = newareaRes2.data.data
          .map((item) => {
            return `<option value="${item}">${item}</option>`
          })
          .join('')
      }
    })

    //上传头像
    const img = document.querySelector('.figure-img')
    const upload = document.querySelector('#upload')
    img.addEventListener('click', function () { //点击图片的时候 让upload调用点击事件
      upload.click()
    })
    upload.addEventListener('change', async function (e) { //当upload里面的内容改变的值改变的时候 执行函数 
      const file = e.target.files[0] //拿到
      const data = new FormData()
      data.append('avatar', file) //用于发起请求需要的参数用Formdata存起来
      const res = await axios({ //发起ajax请求
        url: '/api/file',
        method: 'post',
        data,
      })
      img.src = res.data.data.url //返回的数据用于img的地址
      document.querySelector('[name=avatar').value = res.data.data.url
      //将接口返回的图片地址塞给文件的input框 是为了后续serialize的时候,可以拿到 这一个框框中的图片地址
    })
    //保存提交全部
    document.querySelector('form').addEventListener('submit', async function (e) { //事件委托 阻止触发事件的默认行为
      e.preventDefault()
      const data = serialize(this, {
        hash: true
      }) //表单提交时把所有input框里的内容用serialize存起来 但是img是后台返回的数据
      const res = await axios({
        url: '/api/settings',
        method: 'put',
        data,
      })
      console.log(res);
    })
  </script>
</body>

</html>